<template>
  <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 16px; height: 100%">
    <div v-if="wallet.extensionDownloadUrl" class="download-box">
      <div style="width: 300px; margin: 0 auto; display: flex; gap: 24px">
        <component style="width: 60px; height: 60px; border-radius: 8px;flex-shrink: 0" :is="getBrowserSrc()" />
        <div style="font-size: 14px; line-height: 18px">
          <div style="margin-bottom: 4px; font-weight: bold">{{ wallet.name }} for {{ browser }}</div>
          <div style="color: #ffffff99; margin-bottom: 4px"
            >Access your wallet right from your favorite web browser.</div
          >
          <button style="margin-top: 14px" @click="addToBrowser"> Add to {{ browser }} </button>
        </div>
      </div>
    </div>
    <div v-if="wallet.desktopDownloadUrl" class="download-box">
      <div style="width: 300px; margin: 0 auto; display: flex; gap: 24px">
        <component style="width: 60px; height: 60px; border-radius: 8px;flex-shrink: 0" :is="getPlatformSrc()" />
        <div style="font-size: 14px; line-height: 18px">
          <div style="margin-bottom: 4px; font-weight: bold">{{ wallet.name }} for {{ platform }}</div>
          <div style="color: #ffffff99; margin-bottom: 4px"
            >Access your wallet natively from your powerful desktop.</div
          >
          <button style="margin-top: 14px" @click="addToDesktop"> Add to {{ platform }} </button>
        </div>
      </div>
    </div>
    <div v-if="wallet.mobileDownloadUrl" class="download-box">
      <div style="width: 300px; margin: 0 auto; display: flex; gap: 24px">
        <img style="width: 60px; height: 60px; border-radius: 8px;flex-shrink: 0" :src="wallet.icon ?? wallet.iconUrl" />
        <div style="font-size: 14px; line-height: 18px">
          <div style="margin-bottom: 4px; font-weight: bold">{{ wallet.name }} for Mobile</div>
          <div style="color: #ffffff99; margin-bottom: 4px"
            >Use the mobile wallet to explore the world of Ethereum.</div
          >
          <button style="margin-top: 14px" @click="addToMobile"> Get the app </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { BrowserType, getBrowser } from '../../utils/browsers'
  import { PlatformType, getPlatform } from '../../utils/platforms'
  import Arc from '../Icons/Arc.vue'
  import Brave from '../Icons/Brave.vue'
  import Chrome from '../Icons/Chrome.vue'
  import Edge from '../Icons/Edge.vue'
  import Firefox from '../Icons/Firefox.vue'
  import Opera from '../Icons/Opera.vue'
  import Safari from '../Icons/Safari.vue'
  import Browser from '../Icons/Arc.vue'
  import Windows from '../Icons/Windows.vue'
  import Macos from '../Icons/Macos.vue'
  import Linux from '../Icons/Linux.vue'
  import type { WalletConnector } from '../../wallets/useWalletConnectors'
  // 在未选择钱包时去获取的暂存钱包，
  // 走完用户引导流程会需要跳转这个钱包
  const props = withDefaults(
    defineProps<{
      wallet: WalletConnector
    }>(),
    {}
  )
  const emits = defineEmits(['addToDesktop', 'addToMobile', 'addToBrowser'])

  const browser = getBrowser()
  const getBrowserSrc = () => {
    switch (browser) {
      case BrowserType.Arc:
        return Arc
      case BrowserType.Brave:
        return Brave
      case BrowserType.Chrome:
        return Chrome
      case BrowserType.Edge:
        return Edge
      case BrowserType.Firefox:
        return Firefox
      case BrowserType.Opera:
        return Opera
      case BrowserType.Safari:
        return Safari
      default:
        return Browser
    }
  }
  const platform = getPlatform()
  const getPlatformSrc = () => {
    switch (platform) {
      case PlatformType.Windows:
        return Windows
      case PlatformType.MacOS:
        return Macos
      case PlatformType.Linux:
        return Linux
      default:
        return Linux
    }
  }

  const addToBrowser = () => {
    emits('addToBrowser', props.wallet)
  }

  const addToDesktop = () => {
    emits('addToDesktop', props.wallet)
  }

  const addToMobile = () => {
    emits('addToMobile', props.wallet)
  }
</script>

<style lang="scss" scoped>
  button {
    cursor: pointer;
    padding: 4px 12px;
    transition: all 0.3s ease;
    border: none;
    background: #d9fc01;
    color: #1a1b1f;
    border-radius: 24px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.05em;
    line-height: 16px;
    &:hover {
      transform: scale(1.05);
    }
    &:active {
      transform: scale(0.95);
    }
  }
  .download-box {
    padding: 12px 0;
    flex: 1 1 0;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff14;
    border-radius: 4px;
    border: 1px solid #ffffff11;
  }
</style>
